<script>
import PageHeader from './components/PageHeader.vue'
import PageFooter from './components/PageFooter.vue'
import { useUserStore } from './stores/user'

export default {
  components: {
    PageHeader,
    PageFooter,
  },
  computed: {
    isAdmin() {
      const userStore = useUserStore();
      return userStore.isAdmin;
    }
  }
}
</script>

<template>

    <page-header></page-header>

    <nav>
      <router-link to="/">设备</router-link>
      <router-link v-if="!isAdmin" to="/user/reviews">我的评论</router-link>
      <router-link v-if="!isAdmin" to="/device/bookings">我的预约</router-link>
      <router-link v-if="isAdmin" to="/admin/comments">评论管理</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <main>
      <router-view />
    </main>
    <page-footer></page-footer>
</template>
<style scoped>
a {
  display: inline-block;
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-left: 4px solid #003388;
  border-right: 4px solid #003388;
  color: white;
}

a:hover {
  color: #d0ff00;
  background-color: #0a084e;
  border-left: 4px solid #d0ff00;
  border-right: 4px solid #d0ff00;
}
</style>
